Demonstration of events bubbling

Clicking on any of these rectangles will trigger a "click" event. It will keep bubbling up until the parent is reached and there is nowhere to bubble further.

For example, if #child div is clicked, then the event will propagate all the way to the top to #family container. Give it a go and you will see.

It's worth noting that event target always stays the same as event bubbles up. However, 'this' changes upon the context in which event is processed.

Demonstration of capturing events

Event capturing is kind of the reverse of bubbling in that it starts at the top, and goes down the elements hierarchy.

Click on the example to understand better what is meant by that.

Demonstration of stopping bubbling/capturing

This example shows how propagation can be stopped using "stopPropagation" JavaScript function. No events will capture or bubble.